<template>
	<view class="activity-list-wrapper">
		<view class="header-part">
			<view class="left">
				<view class="tag" v-if="info?.pay_status == 2" :class="{'tag-gray': info?.status == 4 || (info.activity.status == 8 && info?.status != 3)}">
					{{ statusFormat(info?.status, info.activity.status) }}
				</view>
				<view class="tag tag-gray" v-if="info?.pay_status == 1 && dateout(info.end_time) <= 0">
					{{ dateout(info.end_time) > 0 ? '待支付' : '超时未支付' }}
				</view>
				<view class="countdown" v-if="info.pay_status == 1 && dateout(info.end_time) > 0">
					<text>支付倒计时：</text>
					<uni-countdown color="#FF7C2B" splitor-color="#FF7C2B" :show-hour="false" :show-day="false" 
					:second="dateout(info.end_time)" @timeup="countdownTimeup"></uni-countdown>
				</view>
			</view>
			<view class="check-detail" @click="activityDetail()">
				<text>详情</text>
				<uni-icons type="right" :size="16" color="#999"></uni-icons>
			</view>
		</view>
		<view class="down-info-wrapper">
			<view class="activity-title">{{ info.activity?.title || '' }} </view>
			<view class="main-info">
				<view class="left">
					<image class="left_img" :src="info.activity?.imgs?.split(',')[0] || ''" mode="aspectFill"></image>
				</view>
				<view class="right">
					<view class="right-item">下单时间：{{ info.pay_status == 2 ? info.pay_time : info.created_at }}</view>
					<view class="right-item activity-date">活动时间：{{ activityDateFormat(info.activity?.activity_date_start, info.activity?.activity_date_end) }}</view>
					<view class="right-item" @click="copy(info.order_no)">订单编号：{{ info.order_no }}</view>
					<template v-if="info.price_level">
						<view class="cost-title">费用明细：</view>
						<view class="cost-item" v-for="(cost, index) in JSON.parse(info.price_level)" :key="index">
							<text>{{ cost.name }}：</text>
							<text>¥{{ cost.price }}（{{ cost.num }}份）</text>
						</view>
					</template>
				</view>
			</view>
			<view class="line"></view>
			<view class="other-info">
				<template v-if="info.pay_status == 1">
					<view class="op-btn error-btn" @click="$emit('del')">删除</view>
					<view class="op-btn theme-btn" v-if="dateout(info.end_time) > 0" @click="pay">继续支付</view>
				</template>
				<template v-if="info.pay_status == 2 && info.activity.status < 4 && info.status < 3">
					<!-- <view class="op-btn refund-btn" @click="$emit('refund')">申请退款</view> -->
					<view class="op-btn error-btn" @click="$emit('refund')" v-if="info.is_verify==0">退出组队</view>
					<view class="op-btn check-btn" @click="checkQrcode(info.order_no)">查看券码</view>
				</template>
				<template v-if="info.status < 3 && info.pay_status == 2 && info.activity.status > 6">
					<view class="op-btn error-btn" @click="$emit('del')" v-if="info.activity.status == 8">删除</view>
					<view class="op-btn error-btn" @click="$emit('refund')"  v-if="info.activity.status == 7">退出组队</view>
					<view class="op-btn check-btn" @click="checkQrcode(info.order_no)" v-if="info.activity.status == 7">查看券码</view>
					<view class="op-btn theme-btn" @click="launchApp()">发笔记赢好礼</view>
				</template>
				<template v-if="info.status == 3 || info.status == 4 || info.status == 5">
					<view class="op-btn error-btn" @click="$emit('del')" v-if="info.status == 4">删除</view>
					<view class="op-btn check-btn" @click="checkRefund()">退款状态</view>
				</template>
				<template v-if="info.status == 5">
					<view class="op-btn error-btn" @click="$emit('refund')">退出组队</view>
					<view class="op-btn check-btn" @click="checkQrcode(info.order_no)">查看券码</view>
				</template>
				<template v-if="info.activity.status == 8 &&  info.is_verify==0 && info.status!=4">
					<view class="op-btn error-btn" @click="$emit('refund')" >退出组队</view>
				</template>
			</view>
		</view>
	</view>
	<!-- 生成猫的识别二维码 -->
	<view class="qr-code-wrapper">
	  <canvas canvas-id="qrcode" :style="{width: `${qrCodeInfo.size}px`, height: `${qrCodeInfo.size}px`}" />
	</view>
	<!--查询券码-->
	<uni-popup ref="checkPopup" type="bottom" :safe-area="false" @change="qrCodePopupChange" mask-background-color="rgba(0,0,0,0.7)">
			<view class="coupon-popup-content">
				<view class="close-ico" @click="$popupChange(this,'checkPopup')"><uni-icons type="closeempty" :size="20" color="#666"></uni-icons></view>
				<view class="kq-box">
					<view class="title">{{ activity.title }}</view>
					<view class="note margin" style="">活动地点：{{ activity.address }}</view>
					<view class="note margin">活动时间：{{ activityDateFormat(activity.activity_date_start, activity.activity_date_end) }}</view>
					<view class="note margin">
						<text>活动类型：{{ typeFormat(activity.type) }}</text>
						<text style="padding-left: 16rpx;" v-if="activity.type == 1">:-{{ activity.pet_type == 1 ? '猫猫' : (activity.pet_type == 2 ? '狗狗' : '其他') }}</text>
					</view>
					<!-- -->
					<view class="qrcode-part" v-if="check_list">
						<uni-icons type="left" size="20" class="turn-prev" color="#00CAC0" v-if ="curr_check_info.index > 0"  @click="turnPrev"></uni-icons>
						<uni-icons type="right" size="20" class="turn-next" color="#00CAC0" v-if ="curr_check_info.index < curr_check_info.total - 1" @click="turnNext"></uni-icons>
						<view class="check-status">{{curr_check_info.is_verify > 0 ? "已核验" : "待核验" }}</view>
						<view class="qrcode-img" @click="downLoadQrCode">
							<image class="img" :src="qrCodeInfo.src" mode="aspectFill"></image>
							<view class="vertify-tips" v-if="curr_check_info.is_verify > 0">身份验证成功</view>
						</view>
						<view class="check-package">{{curr_check_info.level_name }}: {{curr_check_info.level_price }}</view>
						<view class="curr-package">第{{curr_check_info.index +1 }}个/共{{curr_check_info.total }}个</view>
					</view>
				</view>
				<view class="note code-tip">由发起方<span class="green">扫描二维码</span>验证身份</view>
				<view class="tips" v-if="curr_check_info.jb_num > 0">验券成功后可获得<span class="green">{{ curr_check_info.jb_num }}街贝</span>奖励</view>
			</view>
		</uni-popup>
	  <uni-popup ref="verifypop" type="center"  mask-background-color="rgba(0,0,0,0.8)">
		  <view class="verify-pop" >
			  <view class="close-pop" @click="closeVerifyPop"></view>
			  <view class="title">核验成功</view>
			  <view class="desc">See Wow邀请你参与幸运翻翻乐“萌宠幸运翻翻乐”</view>
			  <view class="btns">
				  <view class="close-btn" @click="closeVerifyPop">稍后再说</view>
				  <view class="goto-btn" @click="goRaffle">立即参与</view>
			  </view>
		  </view>
	  </uni-popup>
</template>

<script>
	import config from '@/network/config.js'
	import { useUserStore } from '../../../store/userStore'
	import uQRCode from '../../../common/uqrcode.js'
	export default {
		props: {
			info: {
				type: Object,
				default() {
					return {}
				}
			}
		},
		emits: ['del', 'refreshData', 'refund'],
		data() {
			return {
				qrCodeInfo: {
				  src: '', // 生成的二维码临时路径-验券二维码
				  size: 200,  //二维码尺寸
				  content: '', //二维码所需地址
				},
				qrCodeStateTimer: null,
				activity: {}, // 活动详细信息
				check_list: {},  // 核验信息
				userStore: useUserStore(),
				curr_check_info :{
					"is_verify": 0,
					"index":0,
					'level_name':'',
					'level_no':'',
					'level_price': 0.01,
					'discount_price':0,
					'jb_num':0,
					'total': 0,
				},
				raffle_id:0,
			}
		},
		computed: {
			priceMeal() {
				return JSON.parse(this.info?.price_level) || []
			},
			safeArea() {
				const { safeAreaInsets } = uni.getWindowInfo()
				return safeAreaInsets.bottom != 0 ? `${safeAreaInsets.bottom}px` : '30rpx'
			},
		},
		methods: {
			// 支付
			async pay() {
				uni.showLoading({
					mask: true
				});
				//查看订单情况，如果优惠券被使用了 不能继续支付
				const res = await this.$request.get('/api/order/check', {
					order_no: this.info.order_no,
				})
				if (res.code == 200) {
					const payData = JSON.parse(this.info?.pay_data);
					uni.requestPayment({
						provider: 'wxpay',
						...payData,
						success: (res) => {
							uni.showToast({
								title: '支付成功',
								icon: 'success'
							})
							this.$emit('refreshData')
						},
						fail: (err) => {
							uni.showToast({
								title: '支付失败',
								icon: 'none'
							})
						},
						complete: () => {
							uni.hideLoading()
						}
					});
				}else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					return
				}
			},
			// 查看退款详情
			checkRefund() {
				uni.navigateTo({
					url: '/pages/mine/refundDetail?order_id=' + this.info.id,
					success: (res) => {
						res.eventChannel.emit('refundPriceLevel', {
							price_level: this.info.price_level
						})
					}
				})
			},
			// 打开第三方APP
			launchApp() {
				const url = `${config.x5jWeb}/?page=streetCoinTaskPage`
				uni.navigateTo({
					url: '/pages/webview/index?url=' + url
				})
			},
			// 查看券码
			async checkQrcode(order_no) {
				const res = await this.$request.get('/api/activity/check_lists_by_order_no', {
					order_no: order_no,
					user_id: this.userStore.userId
				})
				if (res.code == 200) {
					this.check_list = res.data['check_list'];
					this.activity = res.data['activity'];
					var currr_info = this.check_list[0];
					this.curr_check_info.index = 0;
					this.curr_check_info.level_name = currr_info.level_name;
					this.curr_check_info.level_price = currr_info.level_price;
					this.curr_check_info.total = this.check_list.length;
					this.curr_check_info.is_verify = currr_info.is_verify;
					this.curr_check_info.level_no = currr_info.level_no;
					this.curr_check_info.jb_num = currr_info.jb_num;
					this.curr_check_info.discount_price = currr_info.discount_price;
					this.createQRcode();
				} else {
					uni.showToast({
						title: '网络错误',
						icon: 'none'
					})
					return
				}
				
				this.$refs.checkPopup.open()
			},
			// 查看活动详情
			activityDetail() {
				const { id } = this.info.activity
				uni.navigateTo({
					url: '/pages/detail/index?activityId='+id
				})
			},
			// 倒计时时间到了触发
			countdownTimeup() {
				this.$emit('refreshData')
			},
			// 订单状态格式化
			statusFormat(orderStatus, activityStatus) {
				let statusText = ''
				if (orderStatus == 3) {
					statusText = '退款中'
				} else if (orderStatus == 4) {
					statusText = '已退款'
				} else {
					if (activityStatus < 4) {
						statusText = '待开始'
					} else if (activityStatus == 7) {
						statusText = '进行中'
					} else if (activityStatus == 8) {
						statusText = '活动结束'
					}
				}
				return statusText
			},
			activityDateFormat(startDate, endDate) {
				if (!startDate) {
					return '不限'
				}
				const s = startDate?.substring(0, startDate?.lastIndexOf(':')).replace(/\-/g, '.'),
					e = endDate?.substring(0, endDate?.lastIndexOf(':')).replace(/\-/g, '.')
				if (startDate == endDate) {
					return s
				} else {
					return `${s}～${e}`
				}
			},
			dateout(date) {
				if (!date) {
					return -1
				}
				const now_date = new Date().getTime(),
				 end_date = new Date(date?.replace(/\-/g, '/')).getTime()
				const diff = end_date - now_date
				if (diff > 0) {
					return diff / 1000
				} else {
					return 0
				}
			},
			copy(value) {
				uni.setClipboardData({
					data: value,
					success: function () {
						console.log('复制成功');
					}
				});	
			},
			async outteamV2(order_no, user_id) {
				this.$emit.$refs.modal.show({
					cancelText: '取消',
					btnDisplay: 'vertical',
					content: '活动很精彩，确定要退出组队吗？',
					success: async (res) => {
						if (res.confirm) {
							const result = await this.$request.post('/api/activity/out_team_by_order_no', {order_no: order_no, user_id: user_id})
							if (result.code == 200) {
								uni.showToast({
									title: '退款申请已提交',
									icon: 'none'
								})
								setTimeout(() => {
									this.$emit('getOrderList',true);
								}, 200)
							}
						}
					}
				})
				// const res = await this.$request.post('/api/activity/out_team_by_order_no', {
				// 	order_no: order_no,
				// 	user_id:  user_id,
				// });
				// if (res.code == 200) {
				// 	if (!res.data) {
				// 		uni.showToast({
				// 			title: '退出成功',
				// 			icon: 'success'
				// 		})
				// 	}
				// }
			},
			// 生成二维码
			createQRcode(){
				 const content =`level_no=${this.curr_check_info.level_no}` 
				  uQRCode.make({
						canvasId: 'qrcode',
						componentInstance: this,
						text: content ,// 这里是你二维码生成的url 替换即可
						size: this.qrCodeInfo.size,
						margin: 5,
						backgroundColor: '#ffffff',
						typeNumber: 4,
						foregroundColor: this.curr_check_info.discount_price > 0 ? "#2C74E6": '#282C34',
						success: async (res) => {
							this.qrCodeInfo.src = res
						},
					})
			},
			downLoadQrCode() {
				uni.saveImageToPhotosAlbum({
				    filePath: this.qrCodeInfo.src,
				    success: res => {
				        uni.showToast({
				        	title: '保存成功',
				        	icon: 'none'
				        })
				    },
				    fail: err => {
				        console.log(err);
				    }
				});
			},
			// 二维码popup显示隐藏
			qrCodePopupChange(e) {
				if (e.show) {
					if (this.curr_check_info.is_verify > 0) {
						return
					}
					this.qrCodeStateTimer = setInterval(() => {
						this.checkVerifyStatus()
					}, 2000)
				} else {
					if (this.qrCodeStateTimer) {
						clearInterval(this.qrCodeStateTimer)
					}
				}
			},
			// 查询验证状态
			async checkVerifyStatus() {
				const res = await this.$request.get('/api/activity/verify_status_v2',{ level_no: this.curr_check_info.level_no },{ load: false })
				if (res.code == 200) {
					this.curr_check_info.is_verify = res.data.is_verify;
					this.check_list[this.curr_check_info.index].is_verify  = res.data.is_verify;
					if (res.data.is_verify > 0) {
						clearInterval(this.qrCodeStateTimer);
						//弹出
						if (res.data.has_raffle > 0) {
							this.raffle_id = res.data.raffle_id;
							this.showVerifyPop();
						}
					}
				}
			},
			showVerifyPop() {
				this.$refs.verifypop.open();
			},
			closeVerifyPop() {
				this.$refs.verifypop.close();
			},
			goRaffle() {
				uni.navigateTo({
					url: '/pages/raffle/index?raffle_id='+ this.raffle_id
				})
			},
			typeFormat(type) {
				switch (type){
					case 1:
						return '宠物活动'
						break;
					case 2:
					return '宠物友好'
						break;
					case 3:
						return '宠物市集'
						break;
					case 4:
						return '其他活动'
						break;
				}
			},
			turnPrev (){
				this.curr_check_info.index = this.curr_check_info.index -1;
				this.getCheckInfoByIndex()
			},
			turnNext (){
				this.curr_check_info.index = this.curr_check_info.index +1;
				this.getCheckInfoByIndex()
			},
			getCheckInfoByIndex() {
				var curr_info = this.check_list[this.curr_check_info.index];
				this.curr_check_info.level_name = curr_info.level_name;
				this.curr_check_info.level_price = curr_info.level_price;
				this.curr_check_info.level_no = curr_info.level_no;
				this.curr_check_info.is_verify = curr_info.is_verify;
				this.curr_check_info.discount_price = curr_info.discount_price;
				this.curr_check_info.total = this.check_list.length;
				this.createQRcode();
				//启动定时器
				if (curr_info.is_verify == 0) {
					clearInterval(this.qrCodeStateTimer);
					this.qrCodeStateTimer = setInterval(() => {
						this.checkVerifyStatus()
					}, 2000);
				}else{
					clearInterval(this.qrCodeStateTimer)
				}
			},
	  },
	}
</script>

<style scoped lang="scss">
	.activity-list-wrapper {
		background-color: #fff;
		position: relative;
		padding: 24rpx 0;
		border-radius: 24rpx;
		margin-bottom: 16rpx;
		
		.header-part {
			display: flex;
			align-items: center;
			justify-content: space-between;
			.left {
				display: flex;
				align-items: center;
				
				.tag {
					height: 46rpx;
					min-width: 120rpx;
					line-height: 46rpx;
					padding:  0 20rpx;
					text-align: center;
					font-size: 22rpx;
					font-weight: 500;
					color: #fff;
					background: linear-gradient(to right, #FFDA43, #FFA437);
					border-radius: 0rpx 8rpx 8rpx 0;
					margin-top: -10rpx;
				}
				.tag-gray {
					background: #ddd;
					color: #666;
				}
				.countdown {
					font-size: 26rpx;
					margin-left: 20rpx;
					display: flex;
					align-items: center;
					color: #FFA437;
				}
			}
			
			.check-detail {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #666;
				padding: 0 24rpx;
			}
		}
		.down-info-wrapper {
			padding: 0 24rpx;
		}
		.activity-title {
			font-weight: 500;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			text-overflow: ellipsis;
			overflow: hidden;
			line-clamp: 1;
			-webkit-line-clamp: 1;
			margin-bottom: 24rpx;
			margin-top: 16rpx;
		}
	}
	
	.main-info {
		display: flex;
		// align-items: center;
		.left {
			width: 180rpx;
			height: 220rpx;
			background-color: #f6f7f8;
			border-radius: 16rpx;
			overflow: hidden;
			&_img {
				width: 100%;
				height: 100%;
				border-radius: 16rpx;
			}
		}
		.right {
			width: calc(100% - 180rpx);
			padding-left: 24rpx;
			font-size: 20rpx;
			color: #666;
			.right-item {
				margin-bottom: 10rpx;
			}
			.cost-title {
				font-weight: 500;
				color: #222;
				margin-top: 32rpx;
			}
			.cost-item {
				margin-top: 10rpx;
			}
		}
	}
	.line {
		height: 1rpx;
		background-color: rgba(0,0,0,0.1);
		margin: 34rpx 0 22rpx;
	}
	.other-info {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		// margin-top: 24rpx;
		.op-btn {
			height: 62rpx;
			line-height: 62rpx;
			padding: 0 32rpx;
			border-radius: 31rpx;
			font-size: 24rpx;
			background-color: #eee;
			margin-left: 24rpx;
			min-width: 160rpx;
			text-align: center;
		}
		.theme-btn {
			background-color: $uni-color-primary;
			color: #fff;
		}
		.error-btn {
			color: #999;
			border: 1px solid #999;
			background-color: transparent;
		}
		.check-btn {
			border: 1px solid $uni-color-primary;
			color: $uni-color-primary;
			background-color: transparent;
		}
		.refund-btn {
			background-color: #F5F5F5;
			color: #999;
		}
	}
	.turn-prev{
		position: absolute;
		z-index: 99;
		left:15%;
		top:50%;
	}
	.turn-next{
		position: absolute;
		z-index: 99;
		right:15%;
		top:50%;
	}
	
	.coupon-popup-content {
		background-color: #F8FAFD ;
		height:650px;
		background-position: center;
		background-repeat: no-repeat; /* 防止背景图像重复 */
		border-radius: 30rpx 30rpx 0 0;
		padding: 30rpx;
		width: 100%;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: v-bind(safeArea);
		
		.report-success {
			padding-bottom: 24rpx;
			font-size: 32rpx;
			font-weight: 500;
		}
		.title {
			padding-left: 45rpx;
			padding-top: 10rpx;
			font-size: 30rpx;
			font-weight: 500;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			text-overflow: ellipsis;
			line-clamp: 1;
			-webkit-line-clamp: 1;
			overflow: hidden;
			color: #262626;
			line-height: 30px;
		}
		.note {
			padding-left: 45rpx;
			font-weight: 400;
			font-size: 13px;
			color: #7B7B7B;
			line-height: 24px;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}
		.margin {
			margin-top: 5rpx;
		}
		.qrcode-part {
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top:24px;
		}
	
		.code-tip {
			height: auto;
			// background-color: #ddd;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 30px;
			padding-left: 10px;
			// background-color: #fff;
			// padding: 0 8rpx;
		}
		
		.qrcode-img {
			width: 160px;
			height: 160px;
			border-radius: 24rpx;
			overflow: hidden;
			margin: 24px 0 12px;
			position: relative;
			.img {
				width: 100%;
				height: 100%;
			}
			.vertify-tips {
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				right: 0;
				background-color: rgba(255, 255, 255, .9);
				font-size: 32rpx;
				font-weight: 500;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		.meal {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			margin-bottom: 12rpx;
		}
		.tips {
			font-size: 26rpx;
			color: #999;
		}
		.green{
			font-size: 26rpx;
			color: $uni-color-primary;
		}
	}
	
	.kq-box{
		width: 327px;
		height: 468px;
		margin-top:50rpx;
		background-color: #F8FAFD;
		background-image: url(../../../static/images/kq@2x.png);
		background-size:100% 100%;
		border-radius: 30rpx;
	}
	.qr-code-wrapper {
		position: fixed;
		overflow: hidden;
		left: -2000rpx;
		opacity: 0;
		top: 400rpx;
	}
	.close-ico {
		position: absolute;
		top: 20rpx;
		right: 24rpx;
	}
	.check-package{
		width: 193px;
		height: 32px;
		background: #F5F5F5;
		border-radius: 8px 8px 8px 8px;
		font-weight: 400;
		font-size: 13px;
		color: #7B7B7B;
		line-height: 64rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}
	
	
	.curr-package{
		margin-top:30rpx;
		font-weight: 400;
		font-size: 13px;
		color: #7B7B7B;
		line-height: 15px;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}
	
	.check-status{
		margin-top: 24px;
		font-weight: 500;
		font-size: 20px;
		color: #000000;
		line-height: 23px;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	
	.verify-pop{
		width: 606rpx;
		height: 538rpx;
		background-image: url(https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/verify_pop_bg.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		overflow: hidden;
		.close-pop{
			width: 32rpx;
			height: 32rpx;
			margin-top:188rpx;
			margin-left:550rpx;
			background-image: url(https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/pop-close.png);
			background-size: 100% 100%;
		}
		.title{
			width: 446rpx;
			height: 46rpx;
			margin:0 auto;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 36rpx;
			color: #262626;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}
		.desc{
			width: 494rpx;
			height: 96rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 32rpx;
			color: #666666;
			line-height: 48rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
			margin:0 auto;
			margin-top: 20rpx;
		}
		.btns{
			width: 530rpx;
			height: 76rpx;
			margin:0 auto;
			margin-top:40rpx;
			.close-btn{
				width: 252rpx;
				height: 76rpx;
				background: #F5F5F5;
				border-radius: 40rpx;
				float: left;
				font-weight: 400;
				font-size: 32rpx;
				line-height: 76rpx;
				color: #999999;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}
			.goto-btn{
				width: 252rpx;
				height: 76rpx;
				background-image: url(https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/ljcy_bg.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;
				border-radius: 40rpx;
				float: right;
				font-weight: 500;
				font-size: 32rpx;
				line-height: 76rpx;
				color: #FFFFFF;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}
		}
	}
</style>